<style lang="scss" scoped>
.Line{
    width: 90%;
    margin: 0 5%;
    .title{
        font-size: 18px;
        span{
            font-size: 16px;
            color: #333;
        }
    }
    .search{
        margin-top: 20px;
        width: 100%;
        height: 80px;
        padding: 30px 20px 20px 20px;
        box-sizing: border-box;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .list{
        margin-top: 20px;
        width: 100%;
       
        // background-color: #12dfdf;
        .listhead{
            width: 100%;
            height: 30px;
            line-height: 30px;
            display: flex;
            img{
                width: 30px;
                height: 30px;
                // vertical-align: auto;
            }
        }
        .project1{
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            div{
                width: 200px;
                height: 50px;
                line-height: 50px;
                // background-color: #e6d167;
                text-align: center;
            }
        }
       .box{
            height: 360px;
            overflow: auto;
        }
        .const{
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            div{
                width: 200px;
                // flex: 1;
                height: 50px;
                line-height: 50px;
                // background-color: #e6d167;
                text-align: center;
                span{
                    margin-right: 10px;
                }
            }
            .operate{
                    width: 200px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    p{
                        font-size: 14px;
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 50%;
                        background-color: #12dfdf;
                    }
                }
        }
        
        .const:nth-child(2n-1){
                background-color: #ccc;
            }
    }
}

</style>
<template>
        <div class="Line">
            <div class="tltle">
                平台管理/<span>上下线管理</span>
            </div>
            <div class="search">
                <el-form :inline="true"  class="searchForm" ref="searchRef" :model="searchForm">
                    <el-form-item label="场馆名称" prop="name">
                        <el-input   placeholder="场馆名称" v-model="searchForm.name"/>
                    </el-form-item>
                    <el-form-item label="项目名称" prop="sport_type_codeName">
                        <el-input   placeholder="项目名称" v-model="searchForm.sport_type_codeName"/>
                    </el-form-item>
                    <el-form-item   el-form-item label="状态" prop="status">
                        <el-select  placeholder="选择状态">
                            <el-option label="已下线" value="1" />
                            <el-option label="申请中" value="2" />
                            <el-option label="已上线" value="3" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form-item>
                    <el-button type="primary" @click="getstadium()">搜索</el-button>
                </el-form-item>
            </div>
            <div class="list">
                <div class="listhead">
                    <div>
                        <img src="../../../assets/indent.png" alt="">
                    </div>
                    <div>
                        项目列表
                    </div>
                </div>
                <div class="project1">
                    <div>
                        公司
                    </div>
                    <div>
                        场馆
                    </div>
                    <div>
                        项目
                    </div>
                    <div>
                        状态
                    </div>
                    <div>
                        操作
                    </div>
                </div>
                <div class="box">
                    <div class="project2" v-for="item in company" :key="item.id">
                        <div class="const" v-for="items in stadium" :key="items.id">
                            <div>
                                {{ item.shortname}}
                            </div>
                            <div>
                                {{ items.name }}
                            </div>
                            <div>
                                <span v-for="sport in items.sports" :key="sport.id">
                                    {{ sport.sport_type_codeName }}
                                </span>
                            </div>
                            <div>
                                {{ item.status }}
                            </div>
                            <div class="operate">
                                <p>
                                上线
                                </p>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination 
                    @current-change="currentChange"
                    background layout="prev, pager, next" :total="searchForm.total"  v-model:page-size="searchForm.size"  
            />
        </div>

</template>
<script setup>
import {ref} from 'vue'
import {GetCompany,GetStadium} from '../../../api/Myapi'
// 公司
const company = ref([]);
// 场馆
const stadium = ref([]);
// 搜索,分页
const searchRef = ref(null)
const searchForm  = ref({
    sport_type_codeName :'',
    name:'',
    // status:'',

})
// 获取公司
const getcompany = ()=>{
    GetCompany(searchForm.value).then(res=>{
        company.value = res.data.data
        // console.log(res);
    })
}
getcompany();
// 获取场馆
const getstadium  = ()=>{
    console.log(searchForm.value);
    GetStadium(searchForm.value).then(res=>{
        stadium.value = res.data.data
        console.log(res);
    })
}
getstadium();

// 分页
// const currentChange = (val)=>{
//     searchForm.value.current = val;
//     getcompany();
//     getstadium();
// }
</script>